<template>
	<view id="invoicePage">
		<tab-switch :active="active" :tabs="tabs" @change="tabChange"></tab-switch>
		<view class="list" v-if="current == 1" key="wait">
			<view class="item check-item" v-for="(item,index) in list" :key="item.id">
				<image v-if="item.checked" key="checked" src="../../static/img/Btn_select_per.png" mode="aspectFill" class="sel-btn" @click="doCheck(item)"></image>
				<image v-else key="check" src="../../static/img/Btn_select.png" mode="aspectFill" class="sel-btn" @click="doCheck(item)"></image>
				<view class="item-con">
					<view class="item-name">
						订单号：4516623326623458623
					</view>
					<view class="item-time">
						2019-08-05 12:00:00
					</view>
				</view>
				<view class="item-price">
					<text class="item-unit">￥</text>
					<text>299.00</text>
				</view>
			</view>
		</view>
		<view class="list" v-else key="have">
			<view class="item check-item" @click="toInvoiceDetail">
				<view class="item-con">
					<view class="item-name">
						订单号：4516623326623458623
					</view>
					<view class="item-time">
						2019-08-05 12:00:00
					</view>
				</view>
				<view class="item-status">
					<text>已开票</text>
					<image src="../../static/img/arrow-red.png" mode="aspectFill" class="red-arrow"></image>
				</view>
			</view>
			<view class="item check-item" @click="toInvoiceDetail">
				<view class="item-con">
					<view class="item-name">
						订单号：4516623326623458623
					</view>
					<view class="item-time">
						2019-08-05 12:00:00
					</view>
				</view>
				<view class="item-status">
					<text>已开票</text>
					<image src="../../static/img/arrow-red.png" mode="aspectFill" class="red-arrow"></image>
				</view>
			</view>
		</view>
		
		
		
		<view class="cart-footer" v-if="current == 1">
			<view class="check-all" @click="doCheckAll">
				<image v-if="!isCheckAll" key="check" class="check-ico" src="../../static/img/Btn_select.png" mode="aspectFill"></image>
				<image v-else key="checked" class="check-ico" src="../../static/img/Btn_select_per.png" mode="aspectFill"></image>
				<view class="lab">全选</view>
			</view>
			<view class="total-wrapper">
				<view class="total-tit">
					<text class="total-label">总计：</text>
					<text class="total-price">￥{{total}}</text>
				</view>
			</view>
			<view class="sumbit" @click="toCompany">
				申请开票
			</view>
		</view>
		<pay v-if="showPay" @close="payClose" name="传动带上传订单支付" :price="total"></pay>
		<tel-modal :visable="modalVisable" @close="modalVisable=false"></tel-modal>
	</view>
</template>

<script>
	import telModal from "@/components/tel-modal/tel-modal.vue"
	import tabSwitch from "@/components/tab-switch/tab-switch.vue"
	import contract from "@/components/contract/contract.vue"
	import pay from "@/components/pay/pay.vue"
	import { invoiceTabs, invoices } from '../../utils/data.js'
	export default {
		components: {tabSwitch, telModal, contract, pay},
		data() {
			return {
				tabs: invoiceTabs,
				active: 0,
				list: invoices,
				current: 1,
				modalVisable: false,
				isCheckAll: false,
				showPay: false
			}
		},
		computed: {
			total() {
				let sums = this.list.map(item=>{
					if (item.checked) {
						return item.price*1
					}
				})
				
				let tot = sums.reduce((t=0,n=0) => {
					return t+n
				})
				return tot || 0
			}
		},
		methods: {
			doCheck(item) {
				item.checked = !item.checked
			},
			doCheckAll() {
				this.isCheckAll = !this.isCheckAll
				this.list = this.list.map(item => {
					item.checked = this.isCheckAll
					return item
				})
			},
			tabChange(e) {
				console.log(e)
				this.current = e.key
			},
			toMyInvoice() {
				uni.navigateTo({
					url: '../myInvoice/myInvoice',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			toInvoiceDetail() {
				uni.navigateTo({
					url: '../invoiceDetail/invoiceDetail',
					success: res => {},
					fail: () => {},
					complete: () => {}
				});
			},
			toCompany() {
				uni.navigateTo({
					url: '../chooseCompany/chooseCompany'
				})
			},
			payClose() {
				this.showPay = false
			}
		},
		created() {
			console.log(this.list)
		}
	}
</script>

<style>
.pos {
	position: fixed;
	z-index: 999999;
	top: 35upx;
	right: 26upx;
}
	
#invoicePage {
	padding-top: 20upx;
}

.list {
	padding: 20upx 0 0 57upx;
}
.item {
	padding: 38upx 30upx 19upx 0;
	display: flex;
	border-bottom: 1upx solid #F7F7F7;
	position: relative;
}
.sel-btn {
	width: 37upx;
	height: 37upx;
}
.item-con {
	width: 475upx;
	margin-left: 33upx;
}
.item-name {
	font-size:30upx;
	font-weight:500;
	color:rgba(51,51,51,1);
}
.item-time {
	font-size:20upx;
	font-weight:400;
	color:rgba(102,102,102,1);
	margin-top: 22upx;
}
.item-price {
	font-size:34upx;
	font-weight:bold;
	color:rgba(234,10,42,1);
}
.item-unit {
	font-size:24upx;
}
.item-status {
	font-size:22upx;
	font-weight:500;
	color:rgba(234,10,42,1);
	position: absolute;
	top: 49upx;
	right: 28upx;
}
.red-arrow {
	width: 15upx;
	height: 29upx;
	margin-left: 20upx;
	transform: translateY(6upx);
}


.total-tit {
	margin-top:12upx;
}
</style>
